<template>
  <div class="flex flex-col gap-col-8 align-center">
    <div class="flex flex-row gap-row-8">
      <Icon size="20" name="checkActive"></Icon>
      <i18n-t
        keypath="dialog.chatBuy.subText"
        tag="div"
        class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 letter-spacing-dot2"
      >
        <template #nickname>
          <span class="text-primary">{{ content?.nickname }}</span>
        </template>
        <template #count>
          <span>{{ content?.count }}</span>
        </template>
      </i18n-t>
    </div>
    <div class="flex flex-row gap-row-8">
      <Icon size="20" name="checkActive"></Icon>
      <i18n-t
        keypath="info.shopBuyRight.line2"
        tag="div"
        class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 letter-spacing-dot2"
      >
        <template #nickname>
          <span class="text-primary">{{ content?.nickname }}</span>
        </template>
      </i18n-t>
    </div>
  </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { useConfirmData } from '@/compositions/dialog/confirm-data'
import { useWindow } from '@/compositions/utils/window'

const popupDialogStore = usePopupDialogStore()
const { content } = storeToRefs(popupDialogStore)

const { openWindow } = useWindow()

useConfirmData(() => {
  if (content.value.multiPay) return { amount: content.value.amount }
  const newWindow = openWindow()
  return { newWindow }
})
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
